<template>
  <div>
  <v-form
    :form-title='formTitle'
    :form-data="formData1"
  >

    <!--公众号搜索-->
    <template slot="search">
      <div class="search">
        <el-input v-model="keyword" placeholder="输入公众号搜索" clearable></el-input>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
        </el-checkbox>
      </div>
    </template>
  </v-form>
    <el-row type="flex" justify="center">
      <el-col style="display: flex;justify-content: center">
        <el-button size="small" @click="cancel">取消</el-button>
        <el-button size="small" @click="submit" type="primary">确定</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import handleCheck from '@/mixins/handleCheck'

  export default {
    name: 'notice_mpids',
    mixins: [handleCheck],
    props: {
      tencentList: {
        type: Array,
        default: () => ([])
      },
      formData:{
        type:Object,
        default:()=>({})
      }
    },
    data(){
      return {
        keyword: '',
        formData1:{
          notice_mp_ids:[...this.formData.notice_mp_ids]
        },
      }
    },

    computed: {
      formTitle() {
        return [
          {
            cn: '公众号',
            en: 'notice_mp_ids',
            type: 'checkbox',
            slot: 'search',
            list: this._tencentList,
            handleChange: this.handleListCheckChange,
          }
        ]
      },
      isIndeterminate() {
        if (!this.formData1.notice_mp_ids) return false
        const checkedCount = this.formData1.notice_mp_ids.length
        return checkedCount > 0 && checkedCount < this.tencentList.length
      }
    },
    methods:{
      handleCheckAllChange(val) {
        const { mpOptions } = this
        this.formData1.notice_mp_ids = val ? mpOptions : []
        // this.isIndeterminate = false
      },
      submit(){
        console.log('???')
        this.formData.notice_mp_ids = this.formData1.notice_mp_ids
        this.cancel()
      },
      cancel(){
        this.$emit('update:visible',false)
      }
    }
  }
</script>

<style scoped>

</style>
